<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html">
		<!--当前页面三要素-->
		<title>剪裁系统</title>
		<meta name="keywords" content="java,剪裁">
		<meta name="description" content ="">

		<!--css,js-->
		<!---->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑"；color:#666;}
			/*以"."开头的cssa样式称之为类样式*/
			/*cut start*/
			.cut{width:600px;margin:30px auto;}
			.cut h1{font-size:24px; text-align:center;line-height:80px;}
			.cut .c_img{width:px;}
			.cut .c_btn{width:600:htight:60px;text-align:center;padding-top:30px;}
			.cut .c_btn input{width:600px;height:30px;font-size:16px;font-weight:bold;font-family:"微软雅黑";border:0px;background:#f90;cursor: pointer;border-radius: 20px;}
			.cut .c_btn input:hover{background:#fc0;}
			/*cut end */
		</style>
		<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css"></link>

</head>
<body>
		<!--div:层，盒子，容器-->
		<!--以class="自定义名称" 称之为类样式
			1.简明知意
			2.不能以数字开头
			3.“——”，“-”
		-->
		<!--cut start-->
		<form action="cutSuccess.jsp" method="POSt">
			<div class="cut">
				<h1>裁剪系统</h1>
				<div class="c_image">
				   <!--igm 图片标签四要素： src、alt、width、height-->
					<img id="cutImg"  src="images/cut.jpg" alt="flylee老师" width="600" height="400"/>
				</div>
				<div>
					<input type="text" id="imagepath" name="imagepath" value="images\cut.jpg"/>
					X轴:<input type="text" size="4" id="xl" name="x"/>
					y轴:<input type="text" size="4" id="yl" name="y"/>
					宽度:<input type="text" size="4" id="w" name="w"/>
					高度:<input type="text" size="4" id="h" name="h"/>
				</div>
				<div class="c_btn">
				     <input type="submit" value="确  认  剪  裁"/>
				</div>
			</div>
		</form>
		<!--cut end-->

		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#cutImg").Jcrop({
					onChang:showCoords,//获取选中值
					onSelect:showCoords,//拖动的值
						
				});
				function showCoords(c){
					console.log(c);
					$("#xl").val(parseInt(c.x));
					$("#yl").val(parseInt(c.y));
					$("#w").val(parseInt(c.w));
					$("#h").val(parseInt(c.h));

				}
			})
		</script>
</body>
</html>